<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤卡库</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/motai3.css">
	<style>
		.search_img {
			position: absolute;
			right: 3%;
		}

		.import {
			width: 120px;
			height: 35px;
			background: #3fb9e3;
			text-align: center;
			font-size: 18px;
			line-height: 35px;
			color: white;
			border-radius: 12px;
			display: inline-block;
			margin-left: 2%;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.import_model {
			width: 250px;
			display: inline-block;
			float: none;
		}

		.modal-data5,
		.modal-content5 {
			min-height: unset;
			height: unset;
		}

		.modal-content5 .layui-input {
			margin: 0 auto;
		}

		.show {
			visibility: visible !important;
		}

		.btn {
			display: inline-block;
			background-color: #40b9e3;
			color: white;
			margin-left: 20px;
			border-radius: 10px;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			font-size: 18px;
		}

		.long-background-img {
			width: 130px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.senced {
			margin-left: 2px;
		}

		.total {
			height: 20px;
			font-size: 16px;
			line-height: 20px;
			font-weight: bold;
			float: right;
			margin: 0 3%;
			margin-top: -25px;
		}

		.total-title {
			margin-left: 10px;
		}

		.number {
			color: lightcoral;
		}

		.xiala {
			width: 15vw;
			max-width: 140px;
			height: 35px;
			padding-left: 10px;
			font-size: 14px;
			color: #686868;
			border: 1px solid;
		}

		.img_layer div {
			position: fixed;
			right: 20px;
			top: 20px;
			color: white;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;	">

		<div class="refresh action-buttons" onclick="location.reload()">刷新</div>
		<div style="display: inline-block;width: 200px;vertical-align: bottom">
			<a href="attendance_card_student.html">
				<div class="delete">绑定学生卡</div>
			</a>
			<a href="attendance_card_teacher.html">
				<div class="delete">绑定教师卡</div>
			</a>
		</div>
		<div style="float: right;padding-right: 6%">

			<select v-model="search.bound" class="xiala">
				<option :value="undefined">请选择卡状态</option>
				<option :value="true">已绑定</option>
				<option :value="false">未绑定</option>
			</select>

			<input placeholder="请输入卡号" v-model="search.cardNo" @keyup.enter="getData0" class="xiala">
			<input placeholder="请输入学生/教师姓名" v-model="search.name" @keyup.enter="getData0" class="xiala">

			<select v-model="search.classesId" class="xiala">
				<option :value="undefined">请选择班级</option>
				<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
				</option>
			</select>

		</div>
		<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0">

		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table" style="width: 96%; margin-left: 2%;">

			<table class="table_top">
				<thead>
					<tr>
						<th>
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						<th>卡号</th>
						<th>持卡人</th>
						<th>身份</th>
						<th>班级</th>
						<th>有效期至</th>
						<th>绑定时间</th>
						<th>绑定</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(card,index) in list" :key="card.id">
						<td>
							<input type="checkbox" class="check-box" v-model="card.checked">
							<span v-text="index+1"></span>
						</td>
						<td v-text="card.no"></td>
						<td v-text="card.personName"></td>
						<td v-text="['学生','老师','学生父亲','学生母亲','学生家长','学生爷爷','学生奶奶','学生外公','学生外婆'][card.status]"></td>
						<td v-text="card.classesName"></td>
						<td v-text="format(card.expiryDate)"></td>
						<td v-text="format(card.bindTime)"></td>
						<td>
							<button v-if="card.personId" @click="unbind(card.id)">解绑</button> <br>
							<button v-if="card.personId&&card.avatar" @click="bigImg(card)">人脸照片</button>
						</td>
						<td>
							<div v-if="able.del">
								<div class="delete-icon option-icon" @click="del([card.id])">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="delete" v-if="able.del" @click="batchDelete">批量删除</div>
		<div class="delete senced" @click="exports" v-if="able.export" style="margin-left:10px;">批量导出</div>
		<div class="delete senced long-background-img" @click="show=true" v-if="able.expired||role==0">批量设置有效期</div>
		<div class="delete senced long-background-img" @click="importStudent">批量绑定学生</div>
		<div class="delete senced long-background-img" @click="importTeacher">批量绑定老师</div>
		<div class="delete senced long-background-img"><a style="color: white;"
				href="/excel/card_teacher.xls">下载导入模板老师</a></div>
		<div class="delete senced long-background-img"><a style="color: white;"
				href="/excel/card_student.xls">下载导入模板学生</a></div>

		<label class="delete senced long-background-img"  v-if="able.import" for="file1">批量导入人脸照片</label>

		<form enctype="multipart/form-data" id="form1" ref="form1" style="display: none;">
			<input type="file" multiple="multiple" name="file" id="file1" ref="file1" accept="image/*"
				@change="uploads">
		</form>

		<div style="visibility: hidden" :class="{show:show}">
			<div class="model-table5">
				<div class="modal-data5">
					<div style="width: 350px; height: 200px;border: solid 1px #8c8c8c;">
						<div class="modal_title">设置有效期
						</div>
						<div class="modal-content5">有效时间:
							<input class="layui-input" id="layday" style="margin-top: -25px; margin-left: 60px;">
						</div>
						<button class="btn-default" @click="show=false">取消</button>
						<button class="btn-primary" @click="submit">确定</button>
					</div>
				</div>
			</div>
		</div>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

		<div style="float: right;margin-bottom: 20px;">
			总共{{total}}条记录
			<select class="ui-select init" style="margin-top: 14px;" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>

		<div v-if="bigimg" @click="bigimg=false">
			<div class="img_layer">
				<div @click="delAvatar">删除</div>
			</div>
			<img :src="big_src" class="big_Img">
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>

		var schoolId = top_params().id;

		var app = new Vue(merge({
			data: {
				classess: [],
				urls: {
					del: '/pc/card/del',
					imports: null
				},
				schoolId: schoolId,
				role: 2,
				show: false
			},
			created: function () {
				this.urls.list = '/pc/card/list/' + this.schoolId;
				this.getData();
				axios.get('/pc/classes/all/' + this.schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				axios.get('/pc/user/role').then(function (res) {
					this.role = res.data;
				}.bind(this));

				abled('faceUpload', this);

				getAble(function (a) {
					Vue.set(this.able, 'expired', !a.limitCard);
					Vue.set(this.able, 'unbind', !a.limitCard);
				}.bind(this));
			},
			methods: {
				bigImg: function (card) {
					var pic = card.avatar;
					this.big_src = '/static/' + schoolId + '/card/' + pic;
					this.bigimg = true;
					this.id = card.id;
				},
				importStudent: function () {
					this.urls.imports = '/pc/card/student/' + this.schoolId;
					this.$refs.file.click();
				},
				importTeacher: function () {
					this.urls.imports = '/pc/card/teacher/' + this.schoolId;
					this.$refs.file.click();
				},
				format: function (time) {
					if (!time) return null;
					return dayjs(time).format('YYYY-MM-DD');
				},
				submit: function () {
					this.show = false;
					if (this.checkedIds.length === 0) {
						alert('请至少选择1个');
						return;
					}
					if (!this.date) {
						alert('请选择过期日期');
						return;
					}
					axios.post('/pc/card/expiry?date=' + this.date, this.checkedIds).then(function (res) {
						location.reload();
					});
				},
				exports: function () {
					var q = Qs.stringify(this.search);
					if (q) q = '?' + q;
					location.href = '/pc/card/export/' + this.schoolId + q;
				},
				unbind: function (id) {
					if (!confirm('确认解绑？')) return;
					axios.post('/pc/card/unbind/' + id).then(function (res) {
						this.getData();
						alert('成功');
					}.bind(this));
				},
				uploads0: function (func) {
					var files = this.$refs.file1.files, file;
					var list = [];
					if (files.length == 0) return;
					for (var i = 0; i < files.length; i++) {
						file = files[i];
						if (file.size > 5.12E5) {
							alert('文件' + file.name + '大于500kB');
							return;
						}
						if (!/^\d+\.\w+$/.test(file.name)) {
							alert('文件名' + file.name + '有误');
							return;
						}
						list.push(file);
					}

					axios.post('/pc/card/check/' + schoolId, list.map(function (it) {
						return it.name.split('.')[0];
					})).then(function (res) {
						if (res.data.length != 0) {
							alert('找不到卡号或卡号未绑定：' + res.data.join('、'));
							return;
						}
						func(list);
					});
				},
				uploads1: function () {
					this.uploads0(function (list) {
						Promise.all(list.map(function (it) {
							var fd = new FormData();
							fd.append('file', it);
							return axios.post('/pc/upload/card?schoolId=' + schoolId, fd);
						})).then(function (results) {
							var o = {};
							for (var i = 0; i < list.length; i++)
								o[list[i].name.split('.')[0]] = results[i].data.data;
							axios.post('/pc/card/avatar/' + schoolId, o).then(function (res) {
								alert('成功');
							});
						});
					});
				},
				uploads: function () {
					this.uploads0(function (list) {
						axios.post('/pc/card/avatar2/' + schoolId,
							new FormData(this.$refs.form1)).then(function (res) {
								this.getData();
								alert('成功');
							}.bind(this));
					}.bind(this));
				},
				delAvatar: function () {
					if (!confirm('确认删除？')) return;
					axios.delete('/pc/card/avatar/' + this.id).then(function (res) {
						this.getData();
						this.bigimg = false;
					}.bind(this));
				}
			},
			
			watch: {
				show: function (newValue, oldValue) {
					if (newValue) {
						laydate.render({
							elem: '#layday',
							done: function (value, date, endDate) {
								this.date = value;
							}.bind(this)
						});
					}
				}
			}
		}));

	</script>

</body>

</html>